import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { TagMenuItem } from "@/common/type"
import { useRouter } from "vue-router";


const useAppStore = defineStore('app', () => {
    const router = useRouter()
    const isCollapse = ref<boolean>(false)
    const tagMenuList = ref<TagMenuItem[]>([
        {
            name: "主控台",
            frontpath: "/"
        }
    ])
    // 标签导航宽度
    const tabWidth = ref<number>(0)

    // 添加标签导航元素
    const addTagMenuList = (tag: TagMenuItem) => {
        //添加tagMenuList
        const flag = tagMenuList.value.some(item => item.name === tag.name)
        if (!flag) {
            tagMenuList.value.push(tag)
        }
    }

    // 删除标签导航元素
    const removeTagMenuList = (frontpath: string) => {
        //删除tagMenuList
        const index = tagMenuList.value.findIndex(item => item.frontpath === frontpath)
        // 是否存在
        if (index == -1) return;
        // 如果删除末尾元素-删除后跳转前一个路由
        if (index + 1 == tagMenuList.value.length) {
            const frontpath = tagMenuList.value[index - 1].frontpath
            tagMenuList.value.splice(index, 1)
            router.push({
                path: frontpath
            })
        }
        // 如果删除的是中间元素-跳转后一个路由
        if (index + 1 < tagMenuList.value.length) {
            const frontpath = tagMenuList.value[index + 1].frontpath
            tagMenuList.value.splice(index, 1)
            router.push({
                path: frontpath
            })
        }
    }

    // 删除其他的标签导航
    const closeOtherTab = (frontpath: string) => {
        const item = tagMenuList.value.find(item => item.frontpath == frontpath) as TagMenuItem
        if (item) {
            tagMenuList.value = [
                {
                    name: "主控台",
                    frontpath: "/"
                },
                item
            ]
        }
    }
    // 关闭全部标签导航
    const closeAllTab = () => {
        tagMenuList.value = [
            {
                name: "主控台",
                frontpath: "/"
            }
        ]
        router.push({
            path: "/"
        })
    }

    // 关闭左侧或右侧标签导航
    const closeLeftOrRightTab = (frontpath: string, type: string) => {
        const index = tagMenuList.value.findIndex(item => item.frontpath === frontpath)
        if (index == -1) return
        if (type == "left") {
            const r = tagMenuList.value.slice(index)
            tagMenuList.value = [
                {
                    name: "主控台",
                    frontpath: "/"
                },
                ...r
            ]
        } else if (type == "right") {
            tagMenuList.value = tagMenuList.value.slice(0, index + 1)
        }
    }

    const tabValue=ref<string>("")

    return { isCollapse, tagMenuList, addTagMenuList, removeTagMenuList, tabWidth, closeOtherTab, closeAllTab, closeLeftOrRightTab,tabValue }
}, {
    persist: {
        paths: ["isCollapse", "tagMenuList", "tabWidth","tabValue"]
    }
})

export default useAppStore